<template>
  <page-wrap ref="pageWrap" hideTab back :title="title" :show-top="showTop" :dark="loaded ? false : true"
    :hideSafeArea="true" :bg-color="uNavColor">
    <view class="sxh" :style="'padding-top:' + navHeight + 'px;'">
      <view class="left-list">
        <view :class="
            leftActiveIndex == index
              ? 'left-list-item-active'
              : 'left-list-item'
          " v-for="(item, index) in leftList" :key="index" @click="changeActiveIndex(index, item)">{{ item.name }}
        </view>
      </view>
      <view :class="isChange ? 'container-change' : 'container'">
        <swiper class="swiper" interval="5000" circular="false" :current="leftActiveIndex" @change="onSwiperChange"
          @animationfinish="onSwiperStop" @transition="onSwiperTransition">
          <swiper-item class="swiper-item" v-for="(item, index) in imageList" :key="index">
            <view class="card" :class="
                index == leftActiveIndex ? 'card-active' : 'card-unactivated'
              ">
              <view class="card-title">
                <view class="title">{{ item.title }}</view>
                <view class="desc">{{ item.desc }}</view>
              </view>
              <image :src="item.image" class="card-image" />
              <view class="moveButton">
                <image class="arrow" :src="leftArrow" @click="arrowHandleClick(-1)" />
                <view class="middle-button" @click="clickCard(item)">
                  <image class="point" :src="clickHere" />
                  去使用
                </view>

                <image class="arrow" :src="rightArrow" @click="arrowHandleClick(1)" />
              </view>
              <view class="content">{{ item.content }}</view>
            </view>
          </swiper-item>
        </swiper>
        <view class="fixed-item" v-if="!isChange"></view>
      </view>
    </view>
    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>

<script>
import share from "@/mixins/share";
import { env } from "@/api/root";
import LoginDialog from "@/components/LoginDialog";
import {
  createFakePerson,
  getUserInfo,
  cardRegist,
} from "@/api/modules/career";
export default {
  mixins: [share],
  components: {
    LoginDialog,
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
  },
  data() {
    return {
      isChange: false,
      leftArrow:
        "https://img3.job1001.com/ypMp/elan/images/career/sxh/leftArrow.svg",
      rightArrow:
        "https://img3.job1001.com/ypMp/elan/images/career/sxh/rightArrow.svg",
      clickHere:
        "https://img3.job1001.com/ypMp/elan/images/career/sxh/clickHere.svg",
      swiperCurrent: 0,
      isLogin: false, // 登录状态标识
      sharePath: `/pagesSub/doubleChannelChoosingMeeting/index`,
      shareTitle: "一览职途求职工具",
      date: new Date().toISOString(), //现在时间
      uNavColor: "#ffffff",
      showTop: false,
      rightArrowUrl:
        this.$imgBaseSelf + "career/careerAssessResult/right-arrow.png",
      title: "一览职途求职工具",
      navHeight: getApp().globalData.navHeight,
      imageList: [
        {
          title: "查薪酬",
          desc: "解析市场薪酬，查看收入水平",
          image: "https://img3.job1001.com/ypMp/elan/images/career/sxh/cxc.png",
          content:
            "5200+个职业的多维度薪酬分析，帮助你从薪酬分析、招聘分析中，全面了解市场职位薪酬情况。旨在为您的职业选择提供科学、精准的决策依据，让你在追求职业成功的道路上少走弯路，缩短50%的探索时间。",
        },
        {
          title: "职业测评",
          desc: "职业规划利器",
          image:
            "https://img3.job1001.com/ypMp/elan/images/career/sxh/zycp.png",
          content:
            "职业测评部分依托于MBTI测评，帮助你找到最符合自己性格类型的职业,了解自身内在的性格倾向、发展思考方式、信息处理方式、决策方式、对外界的反应方式以及在团队建设中的角色分配。",
        },
        {
          title: "性格测评",
          desc: "剖析你当前的行为风格",
          image:
            "https://img3.job1001.com/ypMp/elan/images/career/sxh/xgcp.png",
          content:
            "在探索职业发展的道路上，了解自己的行为风格，能助你改进自己的行为以适应不同的环境。性格测评部分依托于DISC测评，通过科学的方法帮助您深入剖析自己在特定环境中的性格特质、行为模式和交际方式。",
        },
        {
          title: "AI简历诊断",
          desc: "面试敲门砖",
          image:
            "https://img3.job1001.com/ypMp/elan/images//career/sxh/jlzd.png",
          content:
            "利用自研的人岗匹配大数据分析模型，给予简历优化意见和意向职位能力匹配分析，支持简历快捷导入，精准定位你的简历问题，深度分析你的优劣势，提供专业、可靠的建议，让你的简历脱颖而出。",
        },
        {
          title: "AI面评",
          desc: "面试智能练习",
          image:
            "https://img3.job1001.com/ypMp/elan/images/career/sxh/AI面评.png",
          content:
            "在求职的道路上，一份出色的简历或许是您的突破口，而AI面评则是让您在众多求职者中崭露头角的关键。AI面评服务依托于专业技术模型以及题库，提供线上模拟面试，为您提供全面的面试体验和专业评估。",
        },
        {
          title: "职途报告",
          desc: "职业生涯集合",
          image:
            "https://img3.job1001.com/ypMp/elan/images/career/sxh/ztbg.png",
          content:
            "在经过一系列的测评、诊断与信息推送之后，我们为您呈现的是一份全面而深入的个人职业分析报告。这份报告不仅是对您个人职业发展的精准洞察，更是为您量身打造的职业成长指南，助您在未来的职场道路上做出最优决策。",
        },
      ],
      personId: uni.getStorageSync("person-id") || undefined,
      leftList: [
        {
          name: "查薪酬",
          path: "",
        },
        {
          name: "职业测评",
          path: "",
        },
        {
          name: "性格测评",
          path: "",
        },
        {
          name: "AI简历诊断",
          path: "",
        },
        {
          name: "AI面评",
          path: "",
        },
        {
          name: "职途报告",
          path: "",
        },
      ],
      leftActiveIndex: 0,
      cardType: uni.getStorageSync("cardType"),
    };
  },
  methods: {
    async cardRegistFn() {
      const params = {
        personId: this.personId,
        cardType: 74,
      };
      const res = await cardRegist(params);
      if (res.code != 200) {
        uni.showToast({ icon: "none", title: res.status_desc, duration: 1500 });
      }
    },
    loginSuccessBack() {
      console.log("这里要进行绑卡");
      if (this.cardType) {
        return;
      } else {
        this.cardRegistFn();
      }
    },
    async getUserInfoFn() {
      const res = await getUserInfo({ uid: "" });
      if (res.code == 200) {
        this.cardType = res.data.cardType;
        uni.setStorageSync("cardType", this.cardType);
      }
    },
    onSwiperChange(event) {
      // 获取当前滑块的索引
      this.leftActiveIndex = event.detail.current;
      this.isChange = true;
    },
    onSwiperTransition() {
      this.isChange = true;
    },
    onSwiperStop(event) {
      this.isChange = false;
    },
    clickCard(item) {
      const personId = uni.getStorageSync("person-id").slice(2);

      switch (item.title) {
        case "查薪酬":
          uni.navigateTo({
            url: `/pagesSub/careerGrow/salarySearch/index`,
          });
          break;
        case "职业测评":
          uni.navigateTo({
            url: `/pagesSub/career/activity/vocationalAssessment?personId=${personId}`,
          });
          break;
        case "性格测评":
          let url;
          if (env == "test") {
            url = `https://3gtest.crm1001.com/disc/#/disc/question?personId=${this.personId}&iname=${this.personId}&cardType=${this.cardType}&phone=18825449087&from=miniprogramSxh&discLeftUseNum=99999&sxh=true`;
          } else if (env == "pro" || env == "pre") {
            url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${this.personId}&iname=${this.personId}&cardType=${this.cardType}&phone=18825449087&from=miniprogramSxh&discLeftUseNum=99999&sxh=true`;
          }
          uni.reLaunch({
            url:
              "/pagesSub/public/web/descWebView?link=" +
              encodeURIComponent(url),
          });
          break;
        case "AI面评":
          //这里要先调用一个接口获取personId，算作新用户注册
          // const parmas = {};
          // const res = await getPeronId(parmas);
          uni.navigateTo({
            url: `/pagesSub/companyCenter/interviewAI/majorSearchAI?rightPersonId=${personId}`,
          });
          break;
        case "AI简历诊断":
          uni.navigateTo({
            url: "/pagesSub/AIResumeDiagnoseNew/index?fromSxh=sxh",
          });
          break;
        case "职途报告":
          uni.navigateTo({
            url: "/pagesSub/userCenter/careerPathV2/components/CreateCareerReportPrePage",
          });
          break;
        default:
          break;
      }
    },
    arrowHandleClick(index) {
      // 此时点的右边按钮
      if (index > 0) {
        if (this.leftActiveIndex < this.leftList.length - 1) {
          this.leftActiveIndex += 1;
        } else {
          this.leftActiveIndex = 0;
        }
      } else {
        if (this.leftActiveIndex > 0) {
          this.leftActiveIndex -= 1;
        } else {
          this.leftActiveIndex = this.leftList.length - 1;
        }
      }
    },
    changeActiveIndex(index, item) {
      const personId = uni.getStorageSync("person-id").slice(2);
      this.leftActiveIndex = index;
      // 这里改变了需要改变右侧展示的卡片
    },
  },
  // async onShow() {
  //   this.cardType = uni.getStorageSync("cardType");
  //   if (!this.cardType) {
  //     await this.getUserInfoFn();
  //   }
  //   await this.createFakePersonFn();
  // },
  onShow() {
    this.personId = uni.getStorageSync("person-id").slice(2) || "";
    if (!this.personId) {
      this.$refs.loginDialog.setVisibility(true);
    }
    // 检测登录
    if (!this.cardType) {
      this.getUserInfoFn();
    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "careerPath/";

@font-face {
  font-family: "YouSheBiaoTiHei-2";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/YouSheBiaoTiHei-2.ttf");
}

.sxh {
  background-image: url($img-base + "career/sxh/sxhBackground.png");
  // background-size: 100% 832rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  height: 100vh;
  display: flex;
  .left-list {
    width: 176rpx;
    // height: 1220rpx;
    height: 85vh;
    background: linear-gradient(270deg, #ffffff 0%, #eaf7fe 100%);
    border-radius: 8rpx;
    // opacity: 0.55;
    z-index: 10;
    margin-top: 70rpx;
    margin-bottom: 400rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 15vh;

    .left-list-item,
    .left-list-item-active {
      padding: 32rpx 0 32rpx 32rpx;
      width: 100%;
      height: 90rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #666666;
      line-height: 96rpx;
      font-style: normal;
    }
    .left-list-item-active {
      color: #222222;
      font-size: 28rpx;
      font-weight: 800;
    }
  }

  .container,
  .container-change {
    margin-top: 70rpx;
    // width: 490rpx; /* 卡片宽度 */
    // height: 1370rpx; /* 卡片高度 */
    height: 85vh;
    background-image: url($img-base + "career/sxh/card-background.png");
    // background-size: 108% 97%;
    overflow: hidden;
    flex: 1;
    margin-left: -152rpx;
    padding-left: 132rpx;
    .swiper {
      width: 100%;
      height: 100%;
      // height: 1224rpx;
      opacity: 1;
      // background-image: url($img-base + "career/sxh/card-background.png");
      // background-size: 100% 105%;
      .swiper-item {
        width: 490rpx; /* 卡片宽度 */
        height: 1224rpx; /* 卡片高度 */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;

        // .card {
        //   width: 490rpx; /* 卡片宽度 */
        //   height: 100%; /* 卡片高度 */
        //   background: #ffffff;
        //   border-radius: 12rpx;
        //   border: 2rpx solid #d2e5ed;
        //   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        //   transition: transform 0.5s ease-in-out;
        //   transform-style: preserve-3d;
        //   position: absolute; /* 绝对定位 */
        //   top: 0;
        //   left: 50%;

        //   transform: translateX(-50%) translateZ(0px); /* 初始位置 */
        //   // .card-active {
        //   //   height: 100%;
        //   //   transform: translateX(-50%) translateZ(100px); /* 突出显示的卡片 */
        //   // }
        //   // .card-unactivated {
        //   //   height: 50%;
        //   //   transform: translateX(-50%) translateZ(100px); /* 突出显示的卡片 */
        //   // }
        //   .card-image {
        //     width: 100%;
        //     height: 340rpx;
        //     display: block;
        //     margin-top: 46rpx;
        //   }
        //   .card-title {
        //     margin-left: 44rpx;
        //     .title {
        //       font-family: PingFang-SC, PingFang-SC;
        //       font-weight: 800;
        //       font-size: 48rpx;
        //       color: #222222;
        //       margin-top: 48rpx;
        //     }
        //     .desc {
        //       font-family: PingFang-SC, PingFang-SC;
        //       font-weight: bold;
        //       font-size: 28rpx;
        //       color: #444444;
        //       margin-top: 16rpx;
        //     }
        //   }
        //   .moveButton {
        //     margin-top: 40rpx;
        //     padding: 0 40rpx;
        //     display: flex;
        //     flex-direction: row;
        //     align-items: center;
        //     justify-content: space-between;
        //     .middle-button {
        //       width: 180rpx;
        //       height: 178rpx;
        //       background: #000000;
        //       box-shadow: 0rpx 4rpx 10rpx 0rpx #bbbbbb;
        //       border-radius: 50%;
        //       display: flex;
        //       flex-direction: column;
        //       align-items: center;
        //       justify-content: center;
        //       color: #ffffff;
        //       .point {
        //         width: 72rpx;
        //         height: 70rpx;
        //       }
        //     }
        //     .arrow {
        //       width: 48rpx;
        //       height: 48rpx;
        //     }
        //   }
        //   .content {
        //     padding: 0 46rpx 0 48rpx;
        //     margin-top: 48rpx;
        //     white-space: pre-wrap;
        //     word-wrap: break-word;
        //     text-break: break-all;
        //     font-family: PingFangSC, PingFang SC;
        //     font-weight: 400;
        //     font-size: 24rpx;
        //     color: #888888;
        //     line-height: 44rpx;
        //     text-align: justify;
        //     font-style: normal;
        //   }
        // }
        .card {
          width: 490rpx;
          height: 1224rpx;
          background: #ffffff;
          border-radius: 12rpx;
          border: 2rpx solid #d2e5ed;
          // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          transition: all 0.3s ease;
          .card-image {
            width: 100%;
            height: 340rpx;
            display: block;
            // margin-top: 46rpx;
            scale: 0.8;
          }
          .card-title {
            margin-left: 44rpx;
            .title {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 800;
              font-size: 44rpx;
              color: #222222;
              margin-top: 48rpx;
            }
            .desc {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 24rpx;
              color: #444444;
              margin-top: 16rpx;
            }
          }
          .moveButton {
            // margin-top: 40rpx;
            // padding: 0 40rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            scale: 0.8;
            .middle-button {
              width: 180rpx;
              height: 178rpx;
              background: #000000;
              box-shadow: 0rpx 4rpx 10rpx 0rpx #bbbbbb;
              border-radius: 50%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              color: #ffffff;
              .point {
                width: 72rpx;
                height: 70rpx;
              }
            }
            .arrow {
              width: 48rpx;
              height: 48rpx;
            }
          }
          .content {
            padding: 0 46rpx 0 48rpx;
            margin-top: 48rpx;
            white-space: pre-wrap;
            word-wrap: break-word;
            text-break: break-all;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #888888;
            line-height: 44rpx;
            text-align: justify;
            font-style: normal;
          }
          &.card-active {
            height: 100%;
            transform: scale(1);
          }

          &.card-unactivated {
            height: 824rpx;
            // transform: scale(0.9);
            overflow: hidden;
          }

          &.card-prev {
            transform: translateX(50rpx) scale(0.9);
          }

          &.card-next {
            transform: translateX(-50rpx) scale(0.9);
          }

          // ... existing card content styles ...
        }
        &.card-active {
          height: 100%;
          transform: scale(1);
        }

        &.card-unactivated {
          height: 50%;
          transform: scale(0.9);
        }

        &.card-prev {
          transform: translateX(10rpx) scale(0.9);
        }

        &.card-next {
          transform: translateX(-10rpx) scale(0.9);
        }
      }
    }
  }
  .container {
    background-size: 108% 97%;
  }
  .container-change {
    background-size: 0%;
    // background-size: 108% 97%;
    // opacity: 0.5;
  }
  .fixed-item {
    width: 34rpx;
    height: 800rpx;
    position: fixed;
    right: -6px;
    top: 28%;
    border-radius: 8rpx;
    background-color: #ffffff;
  }
}
</style>
